<template>
    <div class="ecurity_right">
        <div class="frame_title">
            <div>监控画面</div>
        </div>
        <div>
            <div class="frame_item" v-for="(item, index) in data.slice(0, 3)" :key="index" items-center>
                <dv-border-box1>
                    <img :src="sushelou" />
                </dv-border-box1>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { BorderBox1 as DvBorderBox1 } from '@kjgl77/datav-vue3'
import './right.css'
import { getFrame } from '../../../api';
import sushelou from '../../../assets/images/位图.png'
const data = ref([]);

const FrameData = async () => {
    try {
        let res = await getFrame();
        data.value = res.data.data.result[0];
    } catch (error) {
        console.error('获取监控画面数据时出错:', error);
    }
}

onMounted(() => {
    FrameData();
})
</script>

<style></style>